
<template>
  <div class="dashboard-container">
    <div class="dashboard-editor-container">
      <el-button @click="leftYear()">1年</el-button>

      <!-- <div id="myChart1" class="Chart_one" style="height:500%; width:100%;" /> -->

      <div class="chart-wrapper">
        <bar-chart ref="barChart" />
      </div>

    </div>
  </div>

</template>

<script>

import BarChart from '@/views/summary/BarChart'
import crudSummary from '@/api/summary'

export default {
  components: { BarChart },
  data() {
    return {
      barChartObject: {
        xData: [],
        yData: [],
        name: []
      },
      time: 6
    }
  },
  mounted() {
    this.init()
  },
  methods: {

    init() {
      crudSummary.everyMonthNum1(this.time).then(res => {
        var xData = []
        var yData = []
        res.forEach(res => {
          yData.push(res.num)
          xData.push(res.date)
        })

        this.barChartObject.xData = xData
        this.barChartObject.yData = yData
        this.barChartObject.name = '日志统计图'
        this.$refs.barChart.initChart(this.barChartObject)
        console.log(this.barChartObject)
      })
    },
    leftYear() {
      this.time = 12
      this.init()
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
    padding: 10px 22px 22px 22px;
    background-color: rgb(240, 242, 245);
     .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
  }
</style>
